Dashboard components

Dashboard-specific components and layouts in the TalentSync application.

The dashboard components reside under the frontend/components/dashboard directory and are integrated into the main dashboard page located at frontend/app/dashboard/page.tsx. They rely on shared UI components from frontend/components/ui, service abstractions in frontend/services, and typed data models in frontend/types. The layout system is provided by the Next.js app router with a root layout and a content wrapper that manages navigation and sidebar behavior.

graph TB
subgraph "App Router"
LAYOUT["app/layout.tsx"]
LAYOUT_CONTENT["app/layout-content.tsx"]
DASHBOARD_PAGE["app/dashboard/page.tsx"]
end
subgraph "Dashboard Components"
HEADER["components/dashboard/Header.tsx"]
ACTIVITY_CENTER["components/dashboard/ActivityCenter.tsx"]
FEATURE_CARD["components/dashboard/FeatureCard.tsx"]
QUICK_ACTIONS["components/dashboard/QuickActions.tsx"]
QUICK_TIPS["components/dashboard/QuickTips.tsx"]
RESUMES_SECTION["components/dashboard/ResumesSection.tsx"]
STATS_CARD["components/dashboard/StatsCard.tsx"]
MODAL_MANAGER["components/dashboard/ModalManager.tsx"]
end
subgraph "Services & Types"
DASHBOARD_SERVICE["services/dashboard.service.ts"]
USE_DASHBOARD["hooks/queries/use-dashboard.ts"]
DASHBOARD_TYPES["types/dashboard.ts"]
NAVIGATION["lib/navigation.ts"]
end
LAYOUT --> LAYOUT_CONTENT
LAYOUT_CONTENT --> DASHBOARD_PAGE
DASHBOARD_PAGE --> HEADER
DASHBOARD_PAGE --> ACTIVITY_CENTER
DASHBOARD_PAGE --> FEATURE_CARD
DASHBOARD_PAGE --> QUICK_ACTIONS
DASHBOARD_PAGE --> QUICK_TIPS
DASHBOARD_PAGE --> RESUMES_SECTION
DASHBOARD_PAGE --> STATS_CARD
DASHBOARD_PAGE --> MODAL_MANAGER
DASHBOARD_PAGE --> DASHBOARD_SERVICE
DASHBOARD_SERVICE --> USE_DASHBOARD
USE_DASHBOARD --> DASHBOARD_TYPES
DASHBOARD_PAGE --> NAVIGATION

This section introduces each dashboard component, its purpose, props, and typical usage patterns.

• Header: Displays a personalized greeting and current time with animated entrance effects.
• ActivityCenter: Shows recent user activities with live indicators and optional empty-state actions.
• FeatureCard: Presents feature highlights with badges, feature lists, and call-to-action buttons.
• QuickActions: Provides quick-access buttons to frequently used features.
• QuickTips: Delivers contextual tips with gradient backgrounds and color-coded categories.
• ResumesSection: Lists recent resumes with metadata and navigation to analysis pages.
• StatsCard: Visualizes metrics with progress indicators and optional click handlers.
• ModalManager: Centralized modal manager for managing resumes, interviews, and cold mails with editing and deletion workflows.

The dashboard integrates UI components with data fetching and state management. The main dashboard page orchestrates:

• Data fetching via a TanStack Query hook that calls a service abstraction.
• State management for modals and editing/deletion flows.
• Composition of dashboard components with animations and responsive layouts.
• Navigation integration through action items and links.

sequenceDiagram
participant User as "User"
participant Page as "Dashboard Page"
participant Query as "useDashboard Hook"
participant Service as "dashboardService"
participant API as "Backend API"
participant Header as "Header"
participant Stats as "StatsCard"
participant Resumes as "ResumesSection"
participant Activity as "ActivityCenter"
participant Tips as "QuickTips"
participant Actions as "QuickActions"
participant Modals as "ModalManager"
User->>Page : Load dashboard
Page->>Query : Initialize query
Query->>Service : getDashboard()
Service->>API : GET /api/dashboard
API-->>Service : DashboardData
Service-->>Query : DashboardData
Query-->>Page : data, isLoading
Page->>Header : Render greeting and time
Page->>Stats : Render stats cards
Page->>Resumes : Render recent resumes
Page->>Activity : Render recent activity
Page->>Tips : Render tips
Page->>Actions : Render quick actions
Page->>Modals : Manage modals and edits

Purpose:

• Display a personalized greeting based on the time of day and show the current time.
• Provide animated entrance effects using Framer Motion.

Props:

• currentTime: string representing the formatted time.
• userName: string for the user’s name.

Composition pattern:

• Uses Badge and Clock for time display.
• Uses motion variants for staggered entrance.

Customization options:

• Theme colors via brand classes.
• Typography sizes and gradients for headings.

Responsive considerations:

• Text centering and spacing adapt to screen sizes.

Purpose:

• Present recent user activities with live indicators and empty-state actions.

Props:

• activities: Activity[] array.
• isLoading: boolean flag for loading state.

Composition pattern:

• Uses Card, Badge, Loader, and motion wrappers.
• Renders a list with staggered animations and handles empty state with call-to-action links.

Data binding:

• Maps activity types to icons and displays dates.

Customization options:

• Badge colors and text.
• Empty-state CTA buttons and links.

Responsive considerations:

• Grid and flex layouts adjust for smaller screens.

Purpose:

• show a feature with an icon, title, description, feature list, and a prominent call-to-action button.

Props:

• icon: LucideIcon for the feature.
• title: string for the feature name.
• description: string for the feature description.
• badgeText: string for the badge label.
• features: string[] list of feature bullets.
• buttonText: string for the button text.
• buttonIcon: LucideIcon for the button.
• buttonHref: string for the link destination.
• buttonVariant: “default” | “outline”.
• delay: number for animation delay.
• direction: “left” | “right” for slide direction.

Composition pattern:

• Uses Card, Badge, and motion wrappers.
• Button transitions with hover effects.

Customization options:

• Variant styles for button and card.
• Direction and timing of animations.

Responsive considerations:

• Grid layouts and spacing adapt to breakpoints.

Purpose:

• Provide quick-access buttons to frequently used features with animated entrance.

Props:

• None (renders predefined actions).

Composition pattern:

• Uses motion wrappers and Link components.
• Two primary actions with gradient backgrounds and icons.

Customization options:

• Modify action items in navigation utilities.

Responsive considerations:

• Flex wrap ensures proper stacking on small screens.

Purpose:

• Deliver contextual tips with gradient backgrounds and color-coded categories.

Props:

• None (hardcoded tips).

Composition pattern:

• Uses Card and motion wrappers.
• Grid layout for three tip cards with dynamic styling.

Customization options:

• Add or modify tip entries with icon, title, description, and color classes.

Responsive considerations:

• Responsive grid adjusts columns for tablet and desktop.

Purpose:

• List recent resumes with metadata and navigation to analysis pages.

Props:

• resumes: Resume[] array.
• onViewAll: => void callback for viewing all resumes.

Composition pattern:

• Uses Card, Badge, and motion wrappers.
• Truncates long names and shows upload dates and optional fields.

Data binding:

• Maps resume arrays to cards with links to analysis pages.

Customization options:

• Adjust grid columns and card layouts.

Responsive considerations:

• Responsive grid with 1 column on mobile, 2 on tablet, 3 on desktop.

Purpose:

• Visualize metrics with progress indicators and optional click handlers.

Props:

• icon: LucideIcon for the metric.
• title: string for the metric label.
• value: number | string for the displayed value.
• progressValue: number for the progress bar.
• badgeText: string for the badge label.
• badgeIcon: LucideIcon for the badge.
• iconColor: string for the icon container.
• badgeColor: string for the badge.
• onClick?: => void for card interaction.
• delay: number for animation delay.

Composition pattern:

• Uses Card, Badge, Progress, and motion wrappers.
• Optional click handler enables navigation or modal opening.

Customization options:

• Color classes for icons and badges.
• Click handler for navigation or modal triggers.

Responsive considerations:

• Consistent padding and typography scaling.

Purpose:

• Centralized modal manager for managing resumes, interviews, and cold mails with editing and deletion workflows.

Props:

• showResumesModal, setShowResumesModal: boolean and setter for resumes modal.
• showInterviewsModal, setShowInterviewsModal: boolean and setter for interviews modal.
• showColdMailsModal, setShowColdMailsModal: boolean and setter for cold mails modal.
• resumes: Resume[] array.
• interviewsData: InterviewSession[] array.
• coldMailsData: ColdMailSession[] array.
• isLoadingData, isLoadingInterviews, isLoadingColdMails: loading flags.
• editingResume, setEditingResume: editing state for resume renaming.
• newResumeName, setNewResumeName: input state for new name.
• deletingResume, setDeletingResume: deletion state for resume.
• deletingInterview, setDeletingInterview: deletion state for interview.
• deletingColdMail, setDeletingColdMail: deletion state for cold mail.
• handleRenameResume, handleDeleteResume, handleDeleteInterview, handleDeleteColdMail: handlers for mutations.
• copyToClipboard: utility for copying text.

Composition pattern:

• Uses AnimatePresence and motion wrappers for modal entrances/exits.
• Manages nested modals and confirmation dialogs.
• Handles editing inputs and mutation callbacks.

Data binding:

• Maps data arrays to modal content with conditional rendering.

Customization options:

• Extend modal content for additional entities.
• Customize confirmation dialogs and actions.

Responsive considerations:

• Scrollable modals with max-height constraints.

The dashboard components depend on shared UI primitives, typed data models, and service abstractions. The main dashboard page coordinates data fetching and state management, while components focus on presentation and user interactions.

graph TB
PAGE["app/dashboard/page.tsx"]
HEADER["components/dashboard/Header.tsx"]
ACTIVITY["components/dashboard/ActivityCenter.tsx"]
FEATURE["components/dashboard/FeatureCard.tsx"]
ACTIONS["components/dashboard/QuickActions.tsx"]
TIPS["components/dashboard/QuickTips.tsx"]
RESUMES["components/dashboard/ResumesSection.tsx"]
STATS["components/dashboard/StatsCard.tsx"]
MODALS["components/dashboard/ModalManager.tsx"]
TYPES["types/dashboard.ts"]
SERVICE["services/dashboard.service.ts"]
QUERY["hooks/queries/use-dashboard.ts"]
NAV["lib/navigation.ts"]
PAGE --> HEADER
PAGE --> ACTIVITY
PAGE --> FEATURE
PAGE --> ACTIONS
PAGE --> TIPS
PAGE --> RESUMES
PAGE --> STATS
PAGE --> MODALS
PAGE --> SERVICE
SERVICE --> QUERY
QUERY --> TYPES
PAGE --> NAV

• Lazy loading and virtualization: Consider virtualizing long lists in ActivityCenter and ResumesSection for large datasets.
• Animation costs: Keep motion configurations minimal; avoid heavy transforms on many elements simultaneously.
• Data fetching: Use efficient caching and pagination for activity feeds and resume lists.
• Modal rendering: Unmount modals when closed to reduce DOM overhead.
• Image optimization: Ensure any images used in cards are optimized and lazy-loaded.

Common issues:

• Missing session or redirect loop: Verify authentication state and redirects in the dashboard page.
• Empty activity or resume lists: Confirm data fetching hooks and service calls are successful.
• Modal not closing: Ensure event.stopPropagation is used on modal content and close handlers are bound correctly.
• Editing conflicts: Validate that editing state is cleared after successful mutations.
• Clipboard errors: Handle navigator.clipboard rejections gracefully with user feedback.